<!--  -->
<template>
  <div class=''>
    <div class="belowFlex">
      <div class="leftDepartment">
        <div>
          <el-tree
            :data="treeArrFordepartment"
            node-key="id"
            size="small"
            :check-strictly="defaultRelev"
            @node-click="handleCheckChange"
            :props="defaultProps"
            default-expand-all
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button
                  type="text"
                  size="mini"
                  v-if="isShowAddDel(node)"
                  v-permissions="'department:update'"
                  @click="() => update(data,node)">
                  修改
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  v-permissions="'department:add'"
                  @click="() => append(data,node)">
                  添加
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  v-if="isShowAddDel(node)"
                  v-permissions="'department:delete'"
                  @click="() => remove(data)">
                  删除
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="rightUser">
        <el-form ref="formInline" :inline="true" size="small" :model="formInline" class="demo-form-inline">
          <el-form-item label="用户名称" prop="kw">
            <el-input v-model="formInline.kw" placeholder="请输入用户名称"></el-input>
          </el-form-item>
        <el-form-item label="工作状态" prop="isJob">
          <el-select v-model="formInline.isJob" placeholder="请选择工作状态">
            <el-option label="离职" value="0"></el-option>
            <el-option label="在职" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="formInline.status" placeholder="请选择状态">
            <el-option label="封禁" value="0"></el-option>
            <el-option label="正常" value="1"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="getuserList"
              class="queryButton"
              icon="el-icon-search">查询</el-button>
            <el-button
              class="resetButton"
              @click="resetQuery('formInline')"
              icon="el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-form>
        <el-form>
          <el-button
            type="primary"
            plain
            class="queryButton"
            v-permissions="'user:add'"
            @click="addUserBtn"
            icon="el-icon-plus">新增</el-button>
        </el-form>
        <!-- 新增用户弹框 -->
        <el-dialog
          title="新增用户"
          :visible.sync="isShowAddUser"
          @close="closeAddUser('addUserForm')"
          :close-on-press-escape="true"
          :close-on-click-modal="false"
          width="25%">
          <el-form ref="addUserForm" size="small" :model="addUserFromAdd" :rules="addUserRule" label-width="80px">
            <!-- <el-form-item label="部门" prop="depId">
              <el-select filterable v-model="addUserFromAdd.depId" placeholder="请选择部门">
                <el-option
                v-for="(item,index) in depIdArr"
                :key="index"
                :label="item.depName"
                :value="item.id"></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="昵称" prop="nickName">
              <el-input v-model="addUserFromAdd.nickName"></el-input>
            </el-form-item>
            <el-form-item label="工作状态" prop="isJob">
              <el-select v-model="addUserFromAdd.isJob" placeholder="请选择工作状态">
                <el-option
                v-for="(item,index) in isJobArr"
                :key="index"
                :label="item.name"
                :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="addUserFromAdd.phone"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="roleId">
              <el-select filterable v-model="addUserFromAdd.roleId" placeholder="请选择角色">
                <el-option
                v-for="(item,index) in roleIdArr"
                :key="index"
                :label="item.roleName"
                :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="addUserFromAdd.status" placeholder="请选择状态">
                <el-option
                v-for="(item,index) in statusArr"
                :key="index"
                :label="item.name"
                :value="item.id"></el-option>
              </el-select>
            </el-form-item>

          </el-form>
          <div style="width: 100%; text-align: center;">
            <el-button 
              type="primary"
              plain
              @click="submitAddUser"
              class="queryButton">提交</el-button>
            <el-button
              plain
              class="resetButton"
              @click="closeAddUser('addUserForm')">关闭</el-button>
          </div>
        </el-dialog>
        <!-- 用户详情弹框 -->
        <el-dialog
          title="详情用户"
          :visible.sync="isShowUserDetail"
          @close="closeUserDetail"
          :close-on-press-escape="true"
          :close-on-click-modal="false"
          width="30%">
          <el-form
            ref="UserDetailForm"
            size="small"
            :model="UserDetailFrom"
            :rules="userDetailRule"
            label-width="80px">
            <el-form-item label="昵称" prop="nickName">
              <el-input v-model="UserDetailFrom.nickName"></el-input>
            </el-form-item>
            <el-form-item label="工作状态" prop="isJob">
              <el-select v-model="UserDetailFrom.isJob" placeholder="请选择工作状态">
                <el-option
                v-for="(item,index) in isJobArr"
                :key="index"
                :label="item.name"
                :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="UserDetailFrom.phone"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="roleId">
              <el-select filterable v-model="UserDetailFrom.roleId" placeholder="请选择角色">
                <el-option
                v-for="(item,index) in roleIdArr"
                :key="index"
                :label="item.roleName"
                :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="UserDetailFrom.status" placeholder="请选择状态">
                <el-option
                v-for="(item,index) in statusArr"
                :key="index"
                :label="item.name"
                :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门">
              <el-tree
                :disabled="true"
                :data="treeArrFordepartment"
                ref="detailUserTree"
                node-key="id"
                size="small"
                :default-expanded-keys="defaultExpandedKeys"
                highlight-current
                @node-click="handleCheckChangeDetail"
                :props="defaultProps">
              </el-tree>
            </el-form-item>
          </el-form>
          <div style="width: 100%; text-align: center;">
            <el-button
              type="primary"
              class="submitButton"
              v-permissions="'user:update'"
              @click="submitBtnUserDetail">保存</el-button>
            <el-button
              class="resetButton"
              @click="closeUserDetail('UserDetailForm')">关闭</el-button>
          </div>
        </el-dialog>
        <!-- 表格 -->
        <el-table
          :data="tableDataUser"
          :header-cell-style="{ background:'#f8f8f9',color:'#515a6e'}"
          size="mini"
          style="width: 100%; margin-top: 5px;">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="nickName"
            label="昵称"
            width="90">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="depName"
            label="部门"
            width="90">
          </el-table-column>
          <el-table-column
            prop="roleName"
            label="角色名称"
            width="90">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.status === 0 ? '封禁' : scope.row.status === 1 ? '正常' : scope.row.status === 2 ? '到期' : '-'}}</span>
              </template>
          </el-table-column>
          <el-table-column
            prop="isExpire"
            label="帐号状态"
            width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.isExpire === 0 ? '封禁' : scope.row.isExpire === 1 ? '正常' : '-'}}</span>
              </template>
          </el-table-column>
          <el-table-column
            prop="isJob"
            label="工作状态"
            width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.isJob === 0 ? '离职' : scope.row.isJob === 1 ? '在职' : '-'}}</span>
              </template>
          </el-table-column>
          <el-table-column
            prop="expireTime"
            width="120"
            :show-overflow-tooltip="true"
            label="创建时间">
              <template slot-scope="scope">
                <span>{{ timestampToDate(scope.row.createDate) }}</span>
              </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                v-permissions="'user:detail'"
                @click="getUserDetail(scope.row)"
              >详情</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                v-permissions="'user:delete'"
                @click="deletButton(scope.row.id,scope.row.nickName)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          class="pagination_container"
          :total="paginationForOut.total"
          :page-sizes="[10, 20, 50, 100]"
          :page.sync="paginationForOut.page"
          :limit.sync="paginationForOut.pageSize"
          @pagination="getuserList"
        />
      </div>
    </div>
    <!-- 新增部门弹框 -->
    <el-dialog
      title="新增部门"
      :visible.sync="isShowdepartment"
      @close="closedepartment"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      width="25%">
      <el-form ref="departmentForm" size="small" :model="departmentFromAdd" :rules="addDepartmentRule" label-width="80px">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="departmentFromAdd.name"></el-input>
        </el-form-item>
      </el-form>
      <div style="width: 100%; text-align: center;">
        <el-button 
          type="primary"
          plain
          @click="submitDepartment"
          class="queryButton">提交</el-button>
        <el-button
          plain
          class="resetButton"
          @click="closedepartment('departmentForm')">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 修改部门弹框 -->
    <el-dialog
      title="修改部门"
      :visible.sync="isShowUpdatedepartment"
      @close="closedepartmentUpdate"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      width="25%">
      <el-form ref="departmentFormUpdate" size="small" :model="departmentFromUpdate" :rules="addDepartmentRuleUpdate" label-width="80px">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="departmentFromUpdate.name"></el-input>
        </el-form-item>
      </el-form>
      <div style="width: 100%; text-align: center;">
        <el-button 
          type="primary"
          plain
          @click="submitDepartmentUpdate"
          class="queryButton">提交</el-button>
        <el-button
          plain
          class="resetButton"
          @click="closedepartmentUpdate('departmentForm')">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { departmentList,departmentAdd,departmentDelete,departmentUpdate,userList,userAdd , userUpdate ,userDelete } from '@/request/departmentUser';
import { roleList } from '@/request/role';
import extractIdAndDepName from './getItemFun';
import storages from '@/until/localStorage';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {
        // 用户
        // 新增
        tableDataUser: [],
        isShowAddUser: false,
        remenberDepartMentID: 0,
        addUserFromAdd: {
          depId: '',
          isJob: '',
          nickName: '',
          phone: '',
          roleId: '',
          status: ''
        },
        addUserRule: {
          // depId: [
          //   { required: true, trigger: 'change', message: '请选择部门' }
          // ],
          isJob: [
            { required: true, trigger: 'change', message: '请选择工作状态' }
          ],
          nickName: [
            { required: true, trigger: 'blur', message: '请输入您的昵称' }
          ],
          roleId: [
            { required: true, trigger: 'change', message: '请选择角色' }
          ],
          phone: [
            { required: true, trigger: 'blur', message: '请输入您的手机号' },
            {
              validator (_, value, callback) {
                const regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
                if (!regTel.test(value)) {
                  callback(new Error('手机号不符合规则'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ],
          status: [
            { required: true, trigger: 'change', message: '请选择状态' }
          ],
        },
        isJobArr: [
          {
            name: '离职',
            id: 0
          },
          {
            name: '在职',
            id: 1
          }
        ],
        statusArr: [
          {
            name: '封禁',
            id: 0
          },
          {
            name: '正常',
            id: 1
          },
          {
            name: '到期',
            id: 2
          }
        ],
        roleIdArr:[],
        paginationForOut: {
          page: 1,
          pageSize: 10,
          total: 0
        },
        // 详情
        isShowUserDetail: false,
        defaultExpandedKeys: [],
        currentID: '',
        UserDetailFrom: {
          userId: '',
          depId: '',
          isJob: '',
          nickName: '',
          phone: '',
          roleId: '',
          status: ''
        },
        userDetailRule: {
          isJob: [
            { required: true, trigger: 'change', message: '请选择工作状态' }
          ],
          nickName: [
            { required: true, trigger: 'blur', message: '请输入您的昵称' }
          ],
          roleId: [
            { required: true, trigger: 'change', message: '请选择角色' }
          ],
          phone: [
            { required: true, trigger: 'blur', message: '请输入您的手机号' },
            {
              validator (_, value, callback) {
                const regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
                if (!regTel.test(value)) {
                  callback(new Error('手机号不符合规则'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ],
          status: [
            { required: true, trigger: 'change', message: '请选择状态' }
          ],
        },
        // 用户查询
        formInline: {
          user: '',
          isJob: '',
          status: ''
        },
        // end
        // 新增弹框 - 部门
        isShowdepartment: false,
        departmentFromAdd: {
          name: ''
        },
        addDepartmentRule: {
          name: [
            { required: true, trigger: 'blur', message: '请输入部门名称' }
          ]
        },
        // end
        // 修改部门弹框
        isShowUpdatedepartment: false,
        departmentFromUpdate: {
          name: ''
        },
        addDepartmentRuleUpdate: {
          name: [
            { required: true, trigger: 'blur', message: '请输入部门名称' }
          ]
        },
        // end
        // 部门树图
        departmentArr: null,
        treeArrFordepartment: [],
        defaultCheckRole: [],
        setRoleIdArrFir: [],
        setRoleIdArrSen: [],
        defaultRelev: false,
        defaultProps: {
          children: 'childList',
          label: 'depName'
        },
        submitParentId: null,
        updateSubmitParentId: null,
        // end
        departmentNameRecode: ''
      };
    },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    isShowAddDel(node){
      if (node.data.my_tagID === 998) {
        return false 
      } else {
        return true
      }
      
    },
    // 删除用户
    deletButton(id,name){
      this.$confirm(`是否确认删除'${name}'`, '提示', {
        type: 'warning',
        confirmButtonText: '确定',
        showCancelButton: '取消',
        distinguishCancelAndClose: false
      }).then(() => {
        userDelete({userId :id}).then(res => {
          if (res.code === '200') {
            this.getuserList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        }).catch(err => {
          this.$message({
            message: '服务器忙~',
            type: 'warning'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消!'
        })
      })
    },
    // 用户
    // 获取角色列表
    getRoleList(){
      const roleObj = {
        limt:9999,
        page: 1
      }
      roleList(roleObj).then(res => {
        // console.log(res);
        this.roleIdArr = res.data.records
      }).catch(err => {
        this.$message({
          message: '服务器忙~',
          type: 'warning'
        })
      })
    },
    // 打开新增用户弹框
    addUserBtn(){
      this.isShowAddUser = true
    },
    // 提交新增用户
    submitAddUser(){
      this.$refs.addUserForm.validate((valid) => {
        if (valid) {
          this.addUserFromAdd.depId = this.remenberDepartMentID
          userAdd(this.addUserFromAdd).then(res => {
            if (res.code === '200') {
              this.isShowAddUser = false
              this.getuserList()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          }).catch(err => {
            this.$message({
              message: '服务器忙~',
              type: 'warning'
            })
          })
        }
      })
    },
    // 关闭新增用户弹框
    closeAddUser(fromName){
      this.$refs[fromName].resetFields();
      // this.resetForm(fromName)
      this.isShowAddUser = false
    },
    // 获取用户列表
    // tree fun 选择左侧部门 获取用户列表
    handleCheckChange(data){
      data.parentId === undefined ? this.remenberDepartMentID = 0 : this.remenberDepartMentID = data.id
      this.getuserList()
    },
    // 获取用户列表
    getuserList(){
      const userObj = {
        depId: this.remenberDepartMentID,
        isJob: this.formInline.isJob,
        kw: this.formInline.kw,
        limit: this.paginationForOut.pageSize,
        page: this.paginationForOut.page,
        status: this.formInline.status,
      }
      userList(userObj).then(res => {
        if (res.code === '200') {
          this.tableDataUser = res.data.records
          if (res.data.total > 0 && Math.ceil(res.data.total / this.paginationForOut.size) < this.paginationForOut.page) {
            this.paginationForOut.page = Math.ceil(res.data.total / this.paginationForOut.size)
            this.getuserList()
          } else {
            this.paginationForOut.total = res.data.total
          }
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      }).catch(err => {
        this.$message({
          message: '服务器忙~',
          type: 'warning'
        })
      })
    },
    // 打开用户详情弹框
    getUserDetail(data){
      this.UserDetailFrom.depId = data.depId
      this.UserDetailFrom.isJob = data.isJob
      this.UserDetailFrom.nickName = data.nickName
      this.UserDetailFrom.phone = data.phone
      this.UserDetailFrom.roleId = data.roleId
      this.UserDetailFrom.status = data.status
      this.UserDetailFrom.userId = data.id
      this.currentID = data.depId
      this.$nextTick(() => {
        this.$refs.detailUserTree.setCurrentKey(this.currentID);
        this.expandParentNodes(this.currentID);
      });
      this.isShowUserDetail = true
    },
    expandParentNodes(nodeId) {
      const node = this.$refs.detailUserTree.getNode(nodeId);
      if (node.parent && node.parent.level !== 0 && node.parent.data.parentId !== undefined) {
        this.defaultExpandedKeys.push(node.parent.data.id);
        this.expandParentNodes(node.parent.data.id);
      }
      // 去重并更新展开状态
      this.defaultExpandedKeys = [...new Set(this.defaultExpandedKeys)];
      // this.$refs.detailUserTree.store.setExpandedKeys(this.defaultExpandedKeys); // 选择打开
    },
    // 提交修改用户详情
    submitBtnUserDetail(){
      this.$refs.UserDetailForm.validate((valid) => {
        if (valid) {
          userUpdate(this.UserDetailFrom).then(res => {
            if (res.code === '200') {
              this.isShowUserDetail = false
              this.getuserList()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          }).catch(err => {
            this.$message({
              message: '服务器忙~',
              type: 'warning'
            })
          })
        }
      })
    },
    handleCheckChangeDetail(data){
      data.parentId === undefined ? this.UserDetailFrom.depId = 0 : this.UserDetailFrom.depId = data.id
    },
    // 关闭用户详情弹框
    closeUserDetail(){
      setTimeout(() => {
        this.defaultExpandedKeys = []
        this.currentID = ''
      }, 0);
      this.isShowUserDetail = false
    },
    // 重置 搜索框
    resetQuery(fromName) {
      // this.resetForm(fromName)
      this.$refs[fromName].resetFields();
    },
    // end
    // 部门
    // 关闭新增部门弹框
    closedepartment(){
      this.isShowdepartment = false
    },
    // 提交新增部门
    submitDepartment(){
      this.$refs.departmentForm.validate((valid) => {
        if (valid) {
          const obj = {
            name: this.departmentFromAdd.name,
            parentId: this.submitParentId
          }
          departmentAdd(obj).then(res => {
            if (res.code === '200') {
              this.getDepartmentList()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.isShowdepartment = false
            } else {
              this.$message({
                type: 'erroe',
                message: res.message
              })
            }
          }).catch(err => {
            this.$message({
              message: '服务器忙~',
              type: 'warning'
            })
          })
        }
      })
    },
    // 关闭修改部门弹框
    closedepartmentUpdate(){
      this.isShowUpdatedepartment = false
    },
    // 提交修改部门
    submitDepartmentUpdate(){
      this.$refs.departmentFormUpdate.validate((valid) => {
        if (valid) {
          const obj = {
            name: this.departmentFromUpdate.name,
            id: this.updateSubmitParentId
          }
          departmentUpdate(obj).then(res => {
            if (res.code === '200') {
              this.getDepartmentList()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.isShowUpdatedepartment = false
            } else {
              this.$message({
                type: 'erroe',
                message: res.message
              })
            }
          }).catch(err => {
            this.$message({
              message: '服务器忙~',
              type: 'warning'
            })
          })
        }
      })
    },
    // 获取部门列表
    getDepartmentList(){
      let perArr = JSON.parse(storages.getItem('permissionsButtonArr'))
      if (perArr.indexOf('department:list') != -1) {
        departmentList().then(res => {
          if (res.code === '200') {
            if (res.data != null) {
              this.remenberDepartMentID = res.data.id
              const nullArr = []
              nullArr.push({
                depName: res.data.name,
                id: res.data.id,
                childList: JSON.parse(JSON.stringify(res.data.departmentList)),
                my_tagID: 998
              })
              this.departmentArr = res.data
              this.treeArrFordepartment = nullArr
            }
            
          } else {
            this.treeArrFordepartment = []
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        }).catch(err => {
          this.$message({
            message: '服务器忙~',
            type: 'warning'
          })
        })
      } else {        
        this.remenberDepartMentID = ''
        this.treeArrFordepartment = []
      }
    },
    // tree fun
    update(data,node){
      // console.log(data,node);
      this.departmentFromUpdate.name = data.depName
      this.updateSubmitParentId = data.id
      this.isShowUpdatedepartment = true
    },
    append(data,node) {
      // console.log(data,node);
      
      if(data.parentId === undefined){
        this.submitParentId = 0
        this.isShowdepartment = true
      } else {
        this.submitParentId = data.id
        this.isShowdepartment = true
      }
    },
    remove(data) {
      this.$confirm(`是否确认删除’${data.depName}‘`, '提示', {
        type: 'warning',
        confirmButtonText: '确定',
        showCancelButton: '取消',
        distinguishCancelAndClose: false
      }).then(() => {
        departmentDelete({id : data.id}).then(res => {
          if (res.code === '200') {
            this.getDepartmentList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        }).catch(err => {
          this.$message({
            message: '服务器忙~',
            type: 'warning'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消!'
        })
      })
    }
    // end
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getDepartmentList()
    this.getRoleList()
    this.getuserList()
  },
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
  .belowFlex {
    width: 100%;
    display: flex;
  }
  .leftDepartment {
    padding: 5px 2px;
    width: 30%;
    font-size: 12px;
    background: #fff;
  }
  .companyTitle {
    font-size: 13px;
    font-weight: 400;
    margin-top: 10px;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .rightUser {
    width: 70%;
    margin-left: 2px;
    padding: 5px 2px;
    box-shadow: -8px 0 15px -5px rgba(0,0,0,0.2), 
              -4px 0 6px -2px rgba(255,255,255,0.3);
    min-height: 100%;  
  }
</style>

